<template>
  <view class="container">
    <BhTitle titleText="上传商铺证照" :custom-click-back="1" @click-back="clickBack"></BhTitle>
    <view style="background-color: white;">
      <view class="header bh-row bh-justify-space-between">
      <view>证件齐全的商铺转出速度快5倍</view>
      <!-- <image src="../images/post_add/post_add_tip_close.svg" mode="scaleToFill" class="header-close" /> -->
    </view>
    <view class="title">
      商铺证照
    </view>
    <view class="count-wrap bh-row bh-justify-space-between">
      <view class="count-pic">上传照片</view>
      <!-- <view class="count-number">1/3</view> -->
    </view>
    <view class="upload-wrap bh-row bh-justify-space-between">
      <view v-if="!postDto.businessLicensePicture" @click="onShowAddPostPicSheet('businessLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">营业执照</view>
      </view>
      <view v-if="postDto.businessLicensePicture"  class="pic-wrap">
        <image @click="previewImg('businessLicensePicture')" :src="postDto.businessLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('businessLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <view v-if="!postDto.healthLicensePicture" @click="onShowAddPostPicSheet('healthLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">卫生许可证</view>
      </view>
      <view v-if="postDto.healthLicensePicture"  class="pic-wrap">
        <image @click="previewImg('healthLicensePicture')" :src="postDto.healthLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('healthLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <view v-if="!postDto.foodLicensePicture" @click="onShowAddPostPicSheet('foodLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">餐饮许可证</view>
      </view>
      <view v-if="postDto.foodLicensePicture"  class="pic-wrap">
        <image @click="previewImg('foodLicensePicture')" :src="postDto.foodLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('foodLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <view v-if="!postDto.envLicensePicture"  @click="onShowAddPostPicSheet('envLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">环评</view>
      </view>
      <view v-if="postDto.envLicensePicture"  class="pic-wrap">
        <image @click="previewImg('envLicensePicture')" :src="postDto.envLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('envLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <view v-if="!postDto.foodProcessLicensePicture" @click="onShowAddPostPicSheet('foodProcessLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">食品加工许可证</view>
      </view>
      <view v-if="postDto.foodProcessLicensePicture"  class="pic-wrap">
        <image @click="previewImg('foodProcessLicensePicture')" :src="postDto.foodProcessLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('foodProcessLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <view v-if="!postDto.foodCirculeLicensePicture" @click="onShowAddPostPicSheet('foodCirculeLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">食品流通许可证</view>
      </view>
      <view v-if="postDto.foodCirculeLicensePicture"  class="pic-wrap">
        <image @click="previewImg('foodCirculeLicensePicture')" :src="postDto.foodCirculeLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('foodCirculeLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <view v-if="!postDto.foodBusinessLicensePicture"  @click="onShowAddPostPicSheet('foodBusinessLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">食品经营许可证</view>
      </view>
      <view v-if="postDto.foodBusinessLicensePicture"  class="pic-wrap">
        <image @click="previewImg('foodBusinessLicensePicture')" :src="postDto.foodBusinessLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('foodBusinessLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <view v-if="!postDto.smokeBusinessLicensePicture" @click="onShowAddPostPicSheet('smokeBusinessLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">香烟经营许可证</view>
      </view>
      <view v-if="postDto.smokeBusinessLicensePicture"  class="pic-wrap">
        <image @click="previewImg('smokeBusinessLicensePicture')" :src="postDto.smokeBusinessLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('smokeBusinessLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <view v-if="!postDto.wineBusinessLicensePicture" @click="onShowAddPostPicSheet('wineBusinessLicensePicture')" class="pic-btn bh-col bh-justify-center bh-align-center">
        <image src="../images/post_add/post_add_camera.svg" mode="scaleToFill" class="pic-cam" />
        <view class="pic-title">酒类经营许可证</view>
      </view>
      <view v-if="postDto.wineBusinessLicensePicture"  class="pic-wrap">
        <image @click="previewImg('wineBusinessLicensePicture')" :src="postDto.wineBusinessLicensePicture" mode="scaleToFill" class="pic" />
        <image @click="onDelPicture('wineBusinessLicensePicture')" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>

      <!-- <view class="pic-wrap">
        <image src="../images/post_add/post_add_pic_test.png" mode="scaleToFill" class="pic" />
        <image src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>
      <view class="pic-wrap">
        <image src="../images/post_add/post_add_pic_test.png" mode="scaleToFill" class="pic" />
        <image src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>
      <view class="pic-wrap">
        <image src="../images/post_add/post_add_pic_test.png" mode="scaleToFill" class="pic" />
        <image src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view> -->
    </view>

    <view class="add-more">
      <view class="add-more-divider"></view>
      <view>添加更多图片</view>
    </view>
    </view>
    
    <view style="height: 96rpx;"></view>
    <view class="continue" @click="postAdd('license', toDelImages)">
      保存
    </view>
    <view style="height: 96rpx;"></view>
    <ShowCustomModal></ShowCustomModal>

    <show-add-post-pic-sheet :show="showAddPostPicSheet" 
    @close="() => {this.showAddPostPicSheet = false}"
    @get-picture="onGetPicture">
    </show-add-post-pic-sheet>
  </view>
</template>

<script>
import showAddPostPicSheet from '@/PostPage/custom_views/show-add-post-pic-sheet.vue';
import { custUploadImg } from '../../components/custom_views/upload-img';
import {post_add_mixin} from './post_add_mixin'
import { checkBase, checkLicense } from '@/components/post_item/post_add_sell_dto';
import { BackendApi } from '../../api/backend_api';
import ShowCustomModal from '../../components/custom_views/show-custom-modal.vue';

export default {
  components: {
    showAddPostPicSheet,
    ShowCustomModal
},
  mixins: [ post_add_mixin],
  data() {
    let that = this
    return {
      showAddPostPicSheet: false,
      ...post_add_mixin.initData(that),
      uploadFieldName: '',
      toDelImages: '',
      tmpAddImages: '',
    }
  },
  computed: {},
  methods: {
    clickBack(){
      this.delTmpAddImages()
      uni.navigateBack()
    },
    previewImg(fieldName){
      let urls = [this.postDto[fieldName]]
      uni.previewImage({
          current: 0,
          urls: urls
        })
    },
    onShowAddPostPicSheet(fieldName){
      this.showAddPostPicSheet = true
      this.uploadFieldName = fieldName
    },
    onDelPicture(fieldName){
      let that = this
      console.log('删除图片测试', this.postDto[fieldName])
      this.showCustomModal({
        reverse: true,
        content: '删除照片？',
        cancelText: '取消',
        confirmText: '删除',
        success(res){
          if (res.confirm) {
            console.log('点击了确定', res)
            that.toDelImages = that.toDelImages + that.postDto[fieldName]
            // BackendApi.v05_tencentCos_delImage({fileUrl: encodeURIComponent(that.postDto[fieldName])}, false).then(res => {
            //   console.log('删除cos中图片返回', res)
            // })
            that.postDto[fieldName] = ''
            that.hideCustomModal()
          } else if (res.cancel) {
            console.log('用户取消注销');
          }
        }
      })
      // uni.showModal({
      //   title: '删除图片',
      //   // content: '是否删除证照？',
      //   cancelColor: '#FF6430',
      //   showCancel: true,
      //   cancelText: '取消',
      //   confirmColor: '#666666',
      //   confirmText: '确定',
      //   success: function (res) {
      //     if (res.confirm) {
      //       console.log('点击了确定', res)
      //       that.toDelImages = that.toDelImages + that.postDto[fieldName]
      //       // BackendApi.v05_tencentCos_delImage({fileUrl: encodeURIComponent(that.postDto[fieldName])}, false).then(res => {
      //       //   console.log('删除cos中图片返回', res)
      //       // })
      //       that.postDto[fieldName] = ''
      //     } else if (res.cancel) {
      //       console.log('用户取消注销');
      //     }
      //   }
      // })
    },
    onGetPicture(uploadParam){
      console.log('图片开始上传', uploadParam)
      let that = this
      custUploadImg(that, uploadParam.type, 1, (custRes)=>{
        if(custRes.code == 200){
          console.log('后台返回数据',custRes)
          that.postDto[that.uploadFieldName] = custRes.data
          that.tmpAddImages = that.tmpAddImages + custRes.data
          // if(that.postDto.facadePicture){
          //   that.postDto.facadePicture = that.postDto.facadePicture + ',' + custRes.data
          // }else{
          //   that.postDto.facadePicture = custRes.data
          // }
          
          console.log('图片数据',that.postDto[that.uploadFieldName])
        }
      },1)
      this.showAddPostPicSheet = false
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
  height: 100vh;
}

.container {
  background-color: #F5F9FA;
  width: 100%;
  height: 100vh;
}

.header {
  background: rgba(248, 113, 71, 0.1);
  font-size: 24rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  padding: 16rpx 32rpx;

  color: #F87147;

  .header-close {
    width: 36rpx;
    height: 36rpx;
    display: block;
  }
}

.title {
  margin-top: 24rpx;
  margin-left: 32rpx;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 40rpx;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);
}

.count-wrap {
  margin-top: 56rpx;
  margin-left: 32rpx;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 32rpx;

  color: #666666;

  .count-pic {}

  .count-number {}
}

.upload-wrap {
  padding-top: 32rpx;
  padding-left: 32rpx;
  flex-wrap: wrap;
  background-color: white;

  .pic-btn {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    opacity: 1;
    background: #F5F5F5;
    margin-right: 32rpx;
    margin-bottom: 32rpx;

    .pic-cam {
      width: 65rpx;
      height: 54.6rpx;
      margin: auto;
      display: block;
      margin-top: 56rpx;
      display: block;
    }
    .pic-title{
      font-size: 24rpx;
      font-weight: normal;
      line-height: 28rpx;
      letter-spacing: 0px;
      width: 100%;
      text-align: center;
      margin: auto;

      color: #999999;
      padding-bottom: 20rpx;
    }
  }

  .pic-wrap {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    opacity: 1;
    margin-right: 32rpx;
    background: #F5F5F5;
    position: relative;
    margin-bottom: 32rpx;

    .pic {
      width: 100%;
      height: 100%;
    }

    .pic-del-btn {
      width: 50rpx;
      height: 50rpx;
      top: -12.7rpx;
      right: -12.7rpx;
      position: absolute;
    }
  }
}

.add-more {
  background: #FFFFFF;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  text-align: center;
  padding-top: 20rpx;
  padding-bottom: 20rpx;

  color: #666666;

  .add-more-divider {
    margin-left: 32rpx;
    margin-right: 32rpx;

    border-bottom: 0.5px solid #EEEEEE;
    margin-bottom: 20rpx;
  }
}

.continue {
  // position: absolute;
  bottom: 96rpx;
  margin-left: 70rpx;
  margin-right: 70rpx;
  // margin-bottom: 96rpx;
  padding-bottom: 1rpx;
  border-radius: 48rpx;
  opacity: 1;
  padding-top: 42rpx;
  padding-bottom: 42rpx;

  background: #F8D247;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 28rpx;
  text-align: center;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);
}
</style>